<template>
  <div class="frequentlyAskedQuestion p-[30px] rounded-[8px]">
    <div class="flex justify-between">
      <span class="font-bold">常见问题</span
      ><span class="name"
        ><van-icon name="location-o" class="mr-[5px]" />当前位置：常见问题</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px]">
      <div
        v-for="(question, index) in questionList"
        :key="index"
        class="question p-[25px] flex justify-between"
      >
        <div>
          <van-icon name="question" :size="18" color="#326EF3" /><span
            class="ml-[15px] text-[14px]"
            >{{ question }}</span
          >
        </div>
        <van-icon name="add" :size="18" color="#326EF3" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let questionList = ref([
  "用户怎样保证数字校园门户个人信息的安全?",
  "第一次登录数字校园统一身份认证平台，系统提示的问题是什么意思?",
  "数字校园门户是什么?该怎样登录?",
  "为什么每次登录过程都会弹出许多对话框?",
  "如何避免每次登录都会出现这些对话框?"
]);
</script>

<style lang="scss" scoped>
.frequentlyAskedQuestion {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
  .question {
    border-bottom: 1px solid var(--color-main-text);
    background-color: #f5f9ff;
    &:first-child {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
  }
}
</style>
